<template>
    <!-- 添加分类弹框 -->
    <el-dialog v-model="dialogFormVisible" title="发布文章" width="500">
    <el-form :model="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.className" />
      </el-form-item>
      <el-form-item label="分类别名" :label-width="formLabelWidth">
        <el-input v-model="form.otherName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false; form = { id:'',className:'',otherName:'' }">关闭</el-button>
        <el-button type="primary"
          @click="Fcclssify()">
         添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑分类的弹框 -->
  <el-dialog v-model="compile" title="修改文章" width="500">
    <el-form :model="form">
      <el-form-item label="分类名字" :label-width="formLabelWidth">
        <el-input v-model="form.className" />
      </el-form-item>
      <el-form-item label="分类别名" :label-width="formLabelWidth">
        <el-input v-model="form.otherName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="compile = false; form = { id:'',className:'',otherName:'' }">关闭</el-button>
        <el-button type="primary" @click="updateFc(form)">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 删除的弹框 -->
<el-dialog v-model="delet"  width="500" draggable>
    <span style="color: red;">确认删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="delet = false">关闭</el-button>
        <el-button type="primary" @click="deletFc()" >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-card class="box-card">
    <!-- 表头 -->
    <template #header>
      <div class="card-header">
        <span>文章分类</span>
        <el-button type='primary' style="float: right;" plain @click="dialogFormVisible=true">添加分类</el-button>
      </div>
    </template>



    <div style="margin-top: 20px;"></div>
   
    <!-- 表格 -->
    <el-table :data="classify" style="width: 100%">
      <el-table-column prop="className" label="分类名称" />
      <el-table-column prop="otherName" label="别名" />
      <el-table-column label="操作" width='200px'>
        <!-- 编辑删除按钮 这里默认插槽可以获取到本行数据-->
        <template #default = {row}>
          <el-row>
            <el-button type="primary" :icon="Edit" circle @click="opencompile(row.id)"></el-button>
            <el-button type="danger" :icon="Delete" circle @click = "delet = true;id = row.id"></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  
  </el-card>
</template>
<script lang="ts" setup>
import {instance} from '../../utils/MyRequeest'
import {classifyFc} from '../../stores/classify'
import { ElMessage } from 'element-plus'
/* 分类的数据 */

let classify = ref()
function AllPage() {
  instance({
    method:'get',
    url:'/page',}).then((res) =>{
      classify.value = res.data.data
      classifyFc().AllClass(classify.value)
    })
}
/* 一进页面就刷新 */
instance({
    method:'get',
    url:'/page',}).then((res) =>{
      classify.value = res.data.data
      classifyFc().AllClass(classify.value)
    })
    /* 添加 */
const Fcclssify = () =>{
  instance({
    method:'post',
    url:'/page/addclass',
    data:{
      className:form.value.className,
      otherName:form.value.otherName
    }
  }).then(() =>{
    ElMessage.success("添加成功")
    AllPage()
  })
dialogFormVisible.value = false
form.value = {id:'',className: '', otherName: ''}
}
/* 删除数据 */
let id = ref()
const delet = ref(false)
 function deletFc() {
instance.delete(`/page/deleteclass/${id.value}`)
.then(() =>{
  ElMessage.success("删除成功")
  AllPage()
  delet.value = false
})  

}
  
/* 添加分类数据 */
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
let form = ref({
  id:'',
  className: '',
  otherName: '',
})



// 引入element-plus的图标
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'



//分页数据
import { ref } from 'vue'


/* 修改文章的弹框数据 */

const compile = ref(false)

/* 修改文章回显数据 */
const opencompile = (id:number) => {
  instance.put(`/page/selectclass/${id}`)
  .then((res) =>{
    form.value = res.data.data
  })
  compile.value = true
  /* 这里不能直接赋值，不然就是响应时的更换视图 */
}
/* 修改分类 */
const updateFc = (x:any) => {
  if(x.className === '' || x.otherName === ''){
    ElMessage.error("分类名称不能为空")

  }
  else{
    instance({
    method:'put',
    url:'/page/updateclass',
    data:{
      id:x.id,
      className:x.className,
      otherName:x.otherName
    }
  }).then(() =>{
    ElMessage.success("修改成功")
    AllPage()
  compile.value = false

  }) 
  
  }
  
}

</script>

<style scoped>
/* 分页 */
.kl {
  margin-top: 20px;
  float: right;
  margin-bottom: 30px;
}

/* 表单 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>